<template>
  <el-card class="box-card">
    <el-row :gutter="20">
      <el-col :span="6" :offset="0">
        <el-icon color="#3B98F7" :size="45"><Avatar style="font-size: 45px" /> </el-icon>
      </el-col>
      <el-col :span="18" :offset="0">
        <div class="statistic-card">
          <el-statistic :value="bankAccountBalance">
            <template #title>
              <div class="statistic-title">项目专户余额</div>
            </template>
          </el-statistic>
        </div>
      </el-col>
    </el-row>
  </el-card>
  <el-card class="box-card">
    <el-row :gutter="20">
      <el-col :span="6" :offset="0">
        <el-icon color="#3B98F7" :size="45"><Ticket style="font-size: 45px" /> </el-icon>
      </el-col>
      <el-col :span="18" :offset="0">
        <div class="statistic-card">
          <el-statistic :value="guaranteeBalance">
            <template #title>
              <div class="statistic-title">项目保证金余额</div>
            </template>
          </el-statistic>
        </div>
      </el-col>
    </el-row>
  </el-card>
  <el-card class="box-card" style="">
    <el-row :gutter="20">
      <el-col :span="6" :offset="0">
        <el-icon color="#3B98F7" :size="45"><WalletFilled style="font-size: 45px" /> </el-icon>
      </el-col>
      <el-col :span="18" :offset="0">
        <div class="statistic-card">
          <el-statistic :value="incomeAmount">
            <template #title>
              <div class="statistic-title">项目进账总额</div>
            </template>
          </el-statistic>
        </div>
      </el-col>
    </el-row>
  </el-card>
</template>

<script setup lang="ts">
import { HomeStatistic } from "@/api/dashboard/types";

const props = defineProps({
  statisticData: {
    type: Object as PropType<HomeStatistic>,
    default: () => ({}),
  },
});

const { statisticData } = toRefs(props);
const bankAccountBalance = ref(0);
const guaranteeBalance = ref(0);
const incomeAmount = ref(0);

const numAdd = function (max: number, totalCount: any) {
  if (totalCount.value == max) return;
  // 动画间隔
  let rate = 30;
  // 总时长
  let time = 1000;
  let step = max / (time / rate);
  if (totalCount.value < max) {
    totalCount.value += step;
    setTimeout(() => {
      numAdd(max, totalCount);
    }, 30);
  } else {
    totalCount.value = max;
  }
};

watchEffect(() => {
  if (statisticData.value) {
    numAdd(statisticData.value.bankAccountBalance ?? 0, bankAccountBalance);
    numAdd(statisticData.value.guaranteeBalance ?? 0, guaranteeBalance);
    numAdd(statisticData.value.incomeAmount ?? 0, incomeAmount);
  }
});
</script>

<style scoped>
.statistic-title {
  display: inline-flex;
  align-items: center;
}

.box-card {
  width: 100%;
  padding: 20px;
  margin-bottom: 32px;
}

:deep().el-statistic__head {
  font-size: 14px;
  color: rgb(163, 163, 163);
  margin: 0;
}
:deep().el-statistic__content span {
  font-size: 16px;
  color: rgb(16, 16, 16);
  font-weight: bolder;
}
</style>
